import React, {PropsWithChildren} from 'react'
import {ConfigProvider, Divider, Grid} from "@nutui/nutui-react-taro";
import QiniuImageUploader from "./QiniuImageUploader";

export interface IDCardUploadAreaProps extends PropsWithChildren {
    front?: string
    back?: string
    onFrontChange: (front: string) => void
    onBackChange: (back: string) => void
}

const IDCardUploadArea: React.FC<IDCardUploadAreaProps> = ({front, back, onBackChange, onFrontChange}) => {
    return <>
        <Divider>身份证</Divider>
        <ConfigProvider theme={{nutuiUploaderImageHeight: "100px", nutuiUploaderImageWidth: `${85.6 / 53.98 * 100}px`}}>
            <Grid columns={2}>
                <Grid.Item>
                    <QiniuImageUploader
                        label="身份证正面"
                        onChange={v => {
                            onFrontChange(v[0]);
                        }}
                        value={!!front ? [front] : []}
                    />
                </Grid.Item>
                <Grid.Item>
                    <QiniuImageUploader
                        label="身份证反面"
                        onChange={v => onBackChange(v[0])}
                        value={!!back ? [back] : []}
                    />
                </Grid.Item>
            </Grid>
        </ConfigProvider>
    </>
}

export default IDCardUploadArea


